<template>
    <div style="width:100vw;height:100vh">
        <div id="main" style="width: 50%;height:70%;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
        var myChart = this.$myEcharts('main')

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '就业率',
                textStyle: { fontSize: 38 },
                padding: []
            },
            grid: {
                top: '30%',
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },

            tooltip: {},
            legend: {
                left: '20%',
                top: '15%',
                width: '',
                itemWidth: 35,
                itemHeight: 20,
                data: ['C2109A班', 'C2109B班', 'C2109C班'],
                icon: "circle",   //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
                itemWidth: 10,  // 设置宽度
                itemHeight: 10, // 设置高度
                itemGap: 30 ,// 设置间距，
                textStyle: {
                    fontSize: 16,//字体大小
                    color: 'rgb(241, 132, 255)'//字体颜色
                },

            },
            xAxis: {
                type: 'category',
                // name: 'x轴',
                // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                nameTextStyle: { color: 'blue', fontSize: 40, align: 'center' },
                nameGap: 25,
                nameLocation: 'center',
                axisTick: { show: true, inside: false },
                axisLine: {
                    show: true, symbolSize: [5, 8], symbolOffset: [-5, 10], lineStyle: {
                        color: 'rgb(241, 132, 255)', type: 'solid',
                    },

                },
            },
            yAxis: {
                axisLine: {
                    show: false, symbol: 'arrow'
                },
                axisTick: { show: false, inside: true },
                axisLabel: { show: true, formatter: '{value}' },
                // name: 'y轴',
                nameLocation: 'center',
                nameTextStyle: { color: 'blue', fontSize: 28, align: 'center' },
                nameGap: 38,
            },
            dataset: {
                source: [
                    ['product', 'C2109A班', 'C2109B班', 'C2109C班'],
                    ['C2109A', 80, 60, 100],
                ]
            },
            series: [{ type: 'bar', symbol: 'circle', symbolSize: 10, barGap: '0%' },
            { type: 'bar', symbol: 'circle', symbolSize: 10, barGap: '0%' },
            { type: 'bar', symbol: 'circle', symbolSize: 10, barGap: '0%' }]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        window.onresize = function () {
            myChart.resize();
        };
    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped>
.ss {
    color: rgb(241, 132, 255);
}
</style>
